<template>
  <el-dialog
    v-model="dialogVisible"
    :title="title"
    width="600px"
    :close-on-click-modal="false"
    class="agreement-dialog"
  >
    <div class="agreement-content">
      <div v-if="loading" class="loading-wrapper">
        <el-icon class="loading-icon"><Loading /></el-icon>
        <span>加载中...</span>
      </div>
      <div v-else-if="error" class="error-wrapper">
        <el-icon class="error-icon"><Warning /></el-icon>
        <span>{{ error }}</span>
      </div>
      <div v-else class="content-wrapper" v-html="formattedContent"></div>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { Loading, Warning } from '@element-plus/icons-vue'
import { getAgreementContentApi } from '@/api/agreement'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  type: {
    type: String,
    required: true,
    validator: (value) => ['user', 'privacy'].includes(value)
  }
})

const emit = defineEmits(['update:modelValue'])

const dialogVisible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const title = computed(() => props.type === 'user' ? '用户协议' : '隐私政策')
const content = ref('')
const loading = ref(false)
const error = ref('')

// 格式化内容，将换行符转换为HTML
const formattedContent = computed(() => {
  if (!content.value) return ''
  return content.value.split('\n').map(line => {
    if (line.trim() === '') return '<br>'
    if (line.match(/^\d+\./)) return `<h3>${line}</h3>`
    if (line.match(/^\(\d+\)/)) return `<p class="sub-item">${line}</p>`
    return `<p>${line}</p>`
  }).join('')
})

// 获取协议内容
const fetchAgreementContent = async () => {
  loading.value = true
  error.value = ''
  try {
    const response = await getAgreementContentApi(props.type)
    if (response.data.code === 200) {
      content.value = response.data.data.content
    } else {
      error.value = response.data.data || response.data.message || '获取协议内容失败'
    }
  } catch (err) {
    console.error('获取协议内容失败:', err)
    error.value = err.response?.data?.data || err.response?.data?.message || '加载失败，请稍后重试'
  } finally {
    loading.value = false
  }
}

watch(() => dialogVisible.value, (newVal) => {
  if (newVal) {
    fetchAgreementContent()
  }
})
</script>

<style lang="scss" scoped>
.agreement-dialog {
  :deep(.el-dialog__body) {
    padding: 20px;
  }
}

.agreement-content {
  max-height: 60vh;
  overflow-y: auto;
  line-height: 1.6;
  color: #606266;
  font-size: 14px;
  
  .loading-wrapper,
  .error-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    gap: 12px;
    
    .el-icon {
      font-size: 32px;
    }
  }
  
  .loading-wrapper {
    color: #409eff;
  }
  
  .error-wrapper {
    color: #f56c6c;
  }
  
  .content-wrapper {
    h3 {
      margin: 16px 0 8px;
      color: #303133;
      font-size: 16px;
      font-weight: 600;
    }
    
    p {
      margin-bottom: 12px;
      text-align: justify;
      
      &.sub-item {
        padding-left: 20px;
        color: #606266;
      }
    }
    
    br {
      content: "";
      display: block;
      margin: 8px 0;
    }
  }
}
</style> 